import React from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {View, Button, Image, RichText} from '@tarojs/components';
import {AtModal, AtModalContent} from 'taro-ui';

import * as T from '../../types';
import actions from '../../actions/index';
import {store2Props} from '../../selectors';
import {OSS_BASE_PATH_PREFIX} from '../../constant';

type IInfoProps = T.IProps & T.IInfoProps;

import './DailyExclusiveModal.less';
import 'taro-ui/dist/style/components/modal.scss';
// @ts-ignore
@connect<Partial<IInfoProps>, T.IInfoState>(store2Props, actions)
/**
 * 赠送游戏次数模态框
 */
export default class StrategyModal extends React.Component<Partial<IInfoProps>, T.IInfoState> {
  // 使用state值
  constructor(props) {
    super(props);
    this.state = {
      atModal: {
        closeOnClickOverlay: false,
      },
      pics: {
        closeIcon: OSS_BASE_PATH_PREFIX + '/dailyExclusiveModalClose.png',
      },
      giveGameTimes: 1,
    };
  }

  /**
   * 渲染
   * @returns
   */
  render() {
    let {
      visible,
      actions: {action},
    } = this.props;
    const {atModal, pics, giveGameTimes} = this.state;
    return (
      <AtModal isOpened={visible} className="dailyExclusiveModal" closeOnClickOverlay={atModal.closeOnClickOverlay}>
        <AtModalContent>
          <Image src={pics.closeIcon} className="closeIcon" onClick={this.handleCancel} />
          <View className="modalContent">
            <View className="emtpyDirver"></View>
            <View className="dailyExclusiveTitle">
              <View>会员每日专享</View>
              <View>获取2个游戏币</View>
            </View>
            <View className="dailyOperate" onClick={this.handleReceive}>
              <View className="dailyOperateTitle">开心收下</View>
            </View>
            {/* <View className="dailyExtraTitle">专享（每日00:00失效）</View> */}
          </View>
        </AtModalContent>
      </AtModal>
    );
  }

  /**
   * 点击取消
   */
  handleCancel = () => {
    this.props.onCancel();
  };

  /**
   * 开心收下
   */
  handleReceive = () => {
    this.props.onReceive();
  };
}
